import React, { useSyncExternalStore } from 'react'
import { TabBarItem } from './styledTabbar'
import store from './store'

export default function TabbarItem({
  children,
  name,
  activeColor,
  inActiveColor,
  handleItemClick,
  icon
}) {
  const state = useSyncExternalStore(store.subscribe, () => {
    return store.getSnapshot()
  })

  return (
    <TabBarItem
      color={name === state.tabName ? activeColor : inActiveColor}
      onClick={handleItemClick(name)}
    >
      <div dangerouslySetInnerHTML={{__html: icon}}></div>
      <div>
        {children}
      </div>
    </TabBarItem>
  )
}
